/**
 * 开店星公众版
 * @description 基于Yii2+Vue2.0+uniapp研发，H5+小程序+公众号全渠道覆盖，功能完善开箱即用，框架成熟易扩展二开
 * @author 青岛开店星信息技术有限公司
 * @link https://www.kaidianxing.com
 * @copyright Copyright (c) 2020-2022 Qingdao ShopStar Information Technology Co., Ltd.
 * @copyright 版权归青岛开店星信息技术有限公司所有
 * @warning Unauthorized deletion of copyright information is prohibited.
 * @warning 未经许可禁止私自删除版权信息.
 */ 
<template>
    <div>
        <div class="account-user">
            <div class="user-left">
                <img v-if="userInfo.avatar"
                     :src="$utils.mediaUrl(userInfo.avatar)"
                     alt="">
                <img v-else
                     src=""
                     alt="">
                <div class="info-box">
                    <div class="name flex">
                        <p>{{ userInfo.nickname }}</p>
                        <span>{{ userInfo.level_name }}</span>
                    </div>
                    <div class="info flex">
                        <span>手机号：</span>
                        <template v-if="userInfo.mobile">
                            <span>{{ userInfo.mobile }}</span>
                            <p @click="setPhoneNumber">修改</p>
                        </template>
                        <template v-else>
                            <span style="color:#FF3C29">未设置</span>
                            <p @click="bindPhoneNumber">设置</p>
                        </template>

                    </div>
                    <div class="info flex">
                        <span>密码设置：</span>
                        <template v-if="userInfo.has_password == '1'">
                            <span style="color:#09C15F">已设置</span>
                            <p @click="setPassword('1')">修改</p>
                        </template>
                        <template v-else>
                            <span style="color:#FF3C29">未设置</span>
                            <p @click="setPassword('2')">设置</p>
                        </template>

                    </div>
                </div>

            </div>
            <ul class="user-right flex">
                <li v-for="(item,index) in infoList" :key="index">
                    <router-link :to="item.path"><p>{{ item.num }}</p></router-link>
                    <span>{{ item.name }}</span>
                </li>
            </ul>
        </div>
        <div class="account-order">
            <div class="title flex">
                <h4>快捷入口</h4>
                <!--                <span>查看全部-->
                <!--                <Icon type="ios-arrow-forward"/>-->
                <!--                </span>-->
            </div>
            <ul class="order-list">
                <li v-for="(item,index) in bottomList" :key="index" @click="toQuickEntry(item)">
                    <Badge :count="Number(item.num)">
                        <i class="iconfont" :class="[item.icon]"></i>
                    </Badge>
                    <p>{{ item.name }}</p>
                </li>
            </ul>
        </div>

        <!--设置密码-->
        <setPwd :show="setPwdShow" :type="passwordType" @confirm="submitPwd" @cancel="hideModel"></setPwd>

        <!--更改手机号-->
        <setPhoneNumber :show="setPhoneShow" :defaultPhone="userInfo.mobile" @cancel="hideModel"
                        @confirm="changeMobile"></setPhoneNumber>
        <!--绑定手机号-->
        <bindPhoneNumber ref="bindMobile" @confirm="bindMobile"></bindPhoneNumber>


    </div>
</template>

<script>
import userApi from '@/api/user'
import orderApi from '@/api/order'
import setPwd from '@/components/account/setPwd'
import setPhoneNumber from '@/components/account/setPhoneNumber'
import bindPhoneNumber from '@/components/account/bindPhoneNumber'

export default {
    name: "index",
    components: {setPwd, setPhoneNumber, bindPhoneNumber},
    data() {
        return {
            userInfo: {},
            orderStatus: [],
            setPwdShow: false,
            setPhoneShow: false,
            passwordType: '1',
            infoList: [
                {
                    num: '0',
                    name: '我的余额',
                    path: '',
                    type: 'balance'
                },
                {
                    num: '0',
                    name: '我的积分',
                    path: '',
                    type: 'credit'
                },
                {
                    num: '0',
                    name: '我的优惠券',
                    path: '',
                    type: 'coupon_total'
                }
            ],
            bottomList: [{
                num: '0',
                icon: 'icon-icon-daizhifu',
                name: '待支付',
                path: '我的订单',
                query: '1'
            }, {
                num: '0',
                icon: 'icon-icon-daishouhuo',
                name: '待收货',
                path: '我的订单',
                query: '3'

            },
                //     {
                //     num: '10',
                //     icon: 'icon-icon-daipingjia',
                //     name: '待评价',
                //     path: '',
                // },
                {
                    num: '0',
                    icon: 'icon-icon-xihuandeshangpin',
                    name: '喜欢的商品',
                    path: '我的收藏',
                },],

        }
    },
    created() {
        this.getUserInfo()
        this.getOrderStatus()
        this.getFavoriteList()
    },
    methods: {
        bindPhoneNumber() {//绑定手机号
            this.$refs.bindMobile.show()
        },
        setPhoneNumber() {//改手机号
            this.setPhoneShow = true
        },
        changeMobile() {//手机号更改完毕
            this.getUserInfo()
        },
        bindMobile() {//手机号设置完毕
            this.getUserInfo()
        },
        submitPwd(data) {//修改密码
            this.hideModel()
            userApi.setPassword(data, {
                hideSuccessTip: true,
                success: (res) => {
                    if (res.error != 0) return
                    this.$Message.success('修改成功！');
                    this.getUserInfo()
                }
            })
        },
        hideModel() {
            this.setPwdShow = false
            this.setPhoneShow = false
        },
        setPassword(type = '1') {
            //1 修改密码 2 设置密码
            this.setPwdShow = true
            this.passwordType = type
        },
        getFavoriteList() {
            userApi.getFavorite({}, {
                hideSuccessTip: true,
                success: (res) => {
                    if (res.error != 0) return
                    this.bottomList.forEach(item => {
                        if (item.name === '喜欢的商品') item.num = res.total
                    })
                }
            })
        },
        getOrderStatus() {
            orderApi.orderGetTotal({
                hideSuccessTip: true,
                success: (res) => {
                    if (res.error != 0) return
                    this.orderStatus = res
                    this.bottomList.forEach(item => {
                        if (item.name === '待支付') item.num = res.wait_pay
                        if (item.name === '待收货') item.num = res.wait_receive
                    })
                }
            })
        },
        toQuickEntry(item) {
            let params = {}
            if (item.query) {
                params.status = item.query
            }
            this.$router.push({name: item.path, params})
        },
        getUserInfo() {
            userApi.getUerInfo({
                hideSuccessTip: true,
                success: (res) => {
                    if (res.error != 0) return
                    this.userInfo = res.data
                    this.$store.commit('login/setUserInfo', this.userInfo)
                    for (let key in this.infoList) {
                        switch (this.infoList[key].type) {
                            case 'balance':
                                this.infoList[key].num = res.data.balance
                                break;
                            case 'credit':
                                this.infoList[key].num = res.data.credit
                                break;
                            case 'coupon_total':
                                this.infoList[key].num = res.data.coupon_total
                                break;
                        }
                    }
                }
            })
        }
        ,
    }
}
</script>

<style scoped lang="scss">
.account-user {
    background-color: #ffffff;
    margin-bottom: 10px;
    height: 208px;
    align-items: center;
    display: flex;

    .user-left {
        flex-shrink: 0;
        width: 398px;
        padding-left: 40px;
        position: relative;
        display: flex;
        align-items: center;

        &:after {
            content: '';
            width: 1px;
            height: 52px;
            background-color: #E9EDEF;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        img {
            width: 90px;
            height: 90px;
            /* global/border */
            border: 3px solid #E9EDEF;
            border-radius: 50%;
            overflow: hidden;
        }

        .info-box {
            margin-left: 20px;

            .name {
                margin-bottom: 14px;
                align-items: center;

                p {
                    font-size: 16px;
                    line-height: 22px;
                    font-weight: 600;
                }

                span {
                    margin-left: 10px;
                    font-size: 12px;
                    line-height: 18px;
                    color: #ffffff;
                    text-align: center;
                    min-width: 42px;
                    padding: 0 5px;
                    height: 18px;
                    left: 0px;
                    top: 0px;
                    background: $theme-BgColor;
                    border-radius: 9px;
                }
            }

            .info {
                font-size: 14px;
                line-height: 20px;
                margin-bottom: 10px;

                span {
                    color: #939799;

                }

                p {
                    cursor: pointer;
                    margin-left: 10px;
                    color: #262B30;

                }
            }
        }
    }

    .user-right {
        width: 630px;
        justify-content: space-around;
        text-align: center;

        li {
            min-width: 150px;
        }

        p {
            margin-bottom: 14px;
            font-size: 24px;
            line-height: 34px;
        }

        span {
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
        }
    }
}

.account-order {
    background-color: #ffffff;
    width: 100%;
    padding: 20px 20px 0;

    .title {
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20px;
        border-bottom: 1px solid #E9EDEF;

        h4 {
            font-size: 16px;
            line-height: 16px;
            font-weight: normal;
        }

        span {
            color: #81878E;
            font-size: 16px;
            line-height: 16px;
            cursor: pointer;

            &:hover {
                color: $theme-color;
            }

            i {
                font-size: 18px;
                line-height: 16px;
            }
        }
    }

    .order-list {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 154px;

        li {
            text-align: center;
            //cursor: pointer;

            i {
                font-size: 36px;
                margin-bottom: 14px;
            }

            p {
                color: #56595B;
                font-size: 14px;
            }
        }
    }

}
</style>